<template>
  <div>
    <van-picker
      title="更换性别"
      show-toolbar
      :default-index="gender"
      :columns="columns"
      @confirm="onConfirm"
      @cancel="onCancel"
 
    />
  </div>
</template>

<script>
import {editUserProfileAPI} from '@/api'
export default {
    props: {
        gender: {
            type:[String, Number],
            required: true
        }
    },
  data() {
    return {
      columns: ["男", "女"]
    };
    },

    methods: {
       async onConfirm(value, index) { 
            try {
                //成功的提示
                this.$toast.loading({
                    message: '正在修改',
                    forbidClick: true
                })


                //1发送请求
                await editUserProfileAPI({
                   gender: index
                })

                //2.修改视图
                this.$emit('update:gender', index)

                //3.关闭夹层
                this.$emit('close')

                //更新成功
                this.$toast.success('修改成功')
            } catch(err) {
                this.$toast.fail('修改失败')
            }
        },
        onCancel() {
            this.$emit('close')
        }
    }
};
</script>

<style>
</style>